<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <main>
    <p2>块级盒子(Block box)和内联盒子(Inline box)</p2>
    <p>在 CSS中我们广泛地使用两种“盒子” —— 块级盒子(block box)和内联盒子(inline box)。<br>
      这两种盒子会在页面流(page flow)和元素之间的关系方面表现出不同的行为:
    </p>
    <dl>
      <dt>块级盒子</dt>
      <dd>
        盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
        (内联方向:内联内容(如句子)的运行方向)
      </dd>
      <dd>
        每个盒子都会换行
      </dd>
      <dd>
        width 和 height 属性可以发挥作用
      </dd>
      <dd>
        内边距(padding), 外边距(margin)和边框(border)会将其他元素从当前盒子周围“推开”
      </dd>
      <dd>
        除非特殊指定，诸如标题 (&lt;h1&gt;等) 和段落 (&lt;p&gt;) 默认情况下都是块级的盒子
      </dd>
      <dt>
        内联盒子
      </dt>
      <dd>
        盒子不会产生换行。
      </dd>
      <dd>
        width 和 height 属性将不起作用。
      </dd>
      <dd>
        垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
      </dd>
      <dd>
        水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。
      </dd>
      <dd>
        用做链接的&lt;a&gt;元素、&lt;span&gt;、&lt;em&gt; 以及&lt;strong&gt;都是默认处于 inline 状态的
      </dd>
    </dl>
    <p>我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型</p>
    <h2>补充: 内部和外部显示类型</h2>
    <p>在这里最好也解释下内部 和 外部 显示类型。如上所述， css 的 box 模型有一个外部显示类型，来决定盒子是块级还是内联。<br>
    同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样 (如上所述).<br>
    但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。该盒子的所有直接子元素都会成为 flex 元素，会根据弹性盒子（Flexbox）规则进行布局，稍后您将了解这些规则
    </p>
    <dl>
      <dt>标准盒模型</dt>
      <dd>盒子width/height=content's width/height</dd>
      <dd>盒子实际大小=content's width/height+padding's+border's</dd>
      <dt>替代盒模型(box-sizing: border-box;)</dt>
      <dd>盒子实际大小=width/height</dd>
    </dl>
<!--外边距折叠-->
<dl>
  <dt>外边距</dt>
  <dd>外边距可为负</dd>
  <dd><span>外边距折叠示例</span>
  <div class="container">
    <p class="one">I am paragraph one.</p>
    <p class="two">I am paragraph two.</p>
  </div>
</dl>
<dl>
  <dt>内边距</dt>
  <dd>内边距不能为负</dd>
  <dd>内边距通常用于将内容推离边框</dd>
</dl>
<dl>
  <dt>display: inline-block, 实现我们需要的块级的部分效果</dt>
  <dd>设置width和height属性会生效</dd>
  <dd>padding, margin, 以及border会推开其他元素</dd>
  <dd>但是,它不会跳转到新行,如果显式添加width和height属性,它只会变得比其内容更大</dd>
</dl>
  </main>
</body>

</html>